<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <h1>投票表</h1>
                <el-button plain icon="el-icon-plus" @click="Add">增加投票题目</el-button>
                &nbsp;
                <el-popconfirm title="确定删除表单所有内容吗？" icon="el-icon-info" icon-color="red" @onConfirm="DelAll">
                <el-button type="danger" slot="reference" icon="el-icon-refresh-left">重新编辑</el-button>
                </el-popconfirm>                
            </div>


            <el-card class="box-card" v-for="(item,index) in topicArray" :key="(item,index)">
                <el-button icon="el-icon-plus" plain @click="AddChoice(index)">增加选项</el-button>
                <div>
                    投票{{ index+1 }}
                    <el-input  v-model="topicArray[index]" style="width:55%;" placeholder="请输入投票题目"></el-input>
                </div>
                <br/>

                <div v-for="(item0,index0) in choiceArray[index]" :key="(item0,index0)">
                    选项{{ index0+1 }}
                    <el-input v-model="choiceArray[index][index0]" placeholder="请输入选项描述" style="width:55%;"></el-input>
                    &nbsp;
                    <el-button plain icon="el-icon-delete" @click="DelChoice(index,index0)">删除选项</el-button>
                </div>
                &nbsp;
                <el-button type="danger" icon="el-icon-delete" plain @click="Del(index)">删除问题</el-button>
            </el-card>


        </el-card>
        <el-button plain icon="el-icon-download">保存问卷</el-button>
        <el-button type="success" icon="el-icon-s-promotion">发布投票</el-button>
    </div>    
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
</template>

<script>
    export default {
    data() {
        return {
            topicArray:[],
            choiceArray:[[]]


      }
    },
    methods: {
        //增加问题
        Add(){
            this.topicArray.push("");//增加问题名
            this.choiceArray.push([]);//增加问题对应的选项
        },
        //删除问题
        Del(i){
            this.topicArray.splice(i,1);//删除问题
            this.choiceArray.splice(i,1);//删除问题对应的选项
        },
        //增加选项
        AddChoice(i){
            this.choiceArray[i].push("");
        },
        //删除选项
        DelChoice(i,j){
            this.choiceArray[i].splice(j,1);
        },
        //删除所有问题
        DelAll(){
            while(this.topicArray.length>0){
                this.topicArray.splice(0,1);
                this.choiceArray.splice(0,1);
            }
        }
    }
  }
</script>

